<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>支付宝账号</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
.aui-content{
  padding: 0 1rem;
}
.getCode{
  border-left: 1px solid #eee;
  width: 5rem;
  text-align: center;
}
.disabled{
  opacity: 0.5;
}
dl.comFlexItem dt {
		width: 4rem;
		font-size: 0.7rem;
		color: #373336;
}
select,
input.input {
		font-size: 0.7rem;
		height: 2rem;
}
.comFlexItem select,
.comFlexItem input.input {
		text-align: left;
}
</style>
</head>
<body>
  <div class="aui-content">
    <div class="info">
      <dl class="comFlexItem aui-border-b">
        <dt>真实姓名</dt>
        <dd class="flex-auto"><input type="text" name="" value="" placeholder="请输入支付宝认证的真实姓名" class="input" id="name" onKeyUp="changeVal();"></dd>
        <dd class="inputDel" tapmode onclick="quxiao(this)">
        </dd>
      </dl>
      <dl class="comFlexItem aui-border-b">
        <dt>支付宝账号</dt>
        <dd class="flex-auto"><input type="type" name="" value=""  placeholder="请输入支付宝账号" class="input" id="account" onKeyUp="changeVal();"></dd>
        <dd class="inputDel" tapmode onclick="quxiao(this)">
        </dd>
      </dl>
      <dl class="comFlexItem aui-border-b">
        <dt>手机号码</dt>
        <dd class="flex-auto"><input type="number"  name="" value=""  placeholder="请输入支付宝认证的手机号" class="input" id="phone" onKeyUp="changeVal();"></dd>
        <dd class="inputDel" tapmode onclick="quxiao(this)">
        </dd>
      </dl>
      <dl class="comFlexItem aui-border-b">
        <dt>验证码</dt>
        <dd class="flex-auto"><input type="number" maxLength="6" name="" value="" placeholder="请输入验证码" class="input" id="code" onKeyUp="changeVal();"></dd>
        <!-- <dd class="inputDel" tapmode onclick="quxiao()"></dd> -->
        <dd><div class="getCode ready" tapmode onclick="getCode(this)">获取验证码</div></dd>
      </dl>
    </div>
    <div class="aui-py-15">
      <div class="comBtmBtn radius disabled" tapmode onclick="submit()">提交</div>
    </div>
  </div>
</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
var name;
var account;
var phone;
var code;
var saveBtnFlag = true;
apiready = function(){
	api.parseTapmode();
  getInfo()
};
function getInfo() {
    api.ajax({
        url: BASE_URL + 'App/User/userInfo',
        method: 'post',
        data: {
            values: {
                userid: getUserId()
            }
        }
    }, function(ret, err) {
        if (ret) {
            if (ret.code == 1 && ret.data) {
							// 支付宝账号
              if(ret.data.user_name != null && ret.data.data_ali_email != null && ret.data.user_mobile !=null){
                $$('#name').val(ret.data.user_name)
                $$('#account').val(ret.data.data_ali_email)
                $$('#phone').val(ret.data.user_mobile)
                $$('.inputDel').removeClass('aui-hide')
              }else{
                $$('.inputDel').addClass('aui-hide')
              }

            }
        }
    });
}
//输入框 keyup事件
function changeVal(){
    $$('input.input').each(function() {
        var _this = $$(this);
        var delBtn = _this.parent().next('.inputDel');
        if ( _this.val()) {
            delBtn.removeClass('aui-hide');
        } else {
            delBtn.addClass('aui-hide');
        }
    });
    saveBtnFlag = true;
    name = $$("#name").val();
    account = $$("#account").val();
    phone = $$("#phone").val();
    code = $$('#code').val();
    if(!name || !account || !phone || !code){
      saveBtnFlag = false;
    }
    if(saveBtnFlag){
      $$('.comBtmBtn').removeClass('disabled');
    }else{
      $$('.comBtmBtn').addClass('disabled');
    }
}
//判断默认显示 清空按钮
changeVal();

// 获取验证码
var times = 59;
var isinerval;

function getCode() {
    if (!$$('.getCode').hasClass('ready')) {
        return;
    }
    if(!checkMobile()){
      return;
    }
    $$('.getCode').removeClass('ready');
    //发送验证码 接口地址
    smsUrl = 'App/User/sendSms';
    testSmsUrl = 'App/User/addCode';

    //测试验证码 （不发送短信，console.log）
    // api.ajax({
    //   url: BASE_URL + testSmsUrl,
    //   method: 'post',
    //   data: {
    //     values: {
    //       mobile: phone
    //     }
    //   }
    // },function(ret, err){
    //   log(ret)
    //   if (ret) {
    //     if(ret.code){
    //       toast('发送成功');
    //       times = 59;
    //       isinerval = setInterval("countDown()", 1000);
    //     }else{
    //       toast('发送失败');
    //       $$('.getCode').addClass('ready');
    //     }
    //   }else{
    //     toast('发送失败，请稍候再试');
    //     $$('.getCode').addClass('ready');
    //   }
    // });
    // return;

    //正式发短信接口
    api.ajax({
      url: BASE_URL + smsUrl,
      method: 'post',
      data: {
        values: {
          mobile: phone
        }
      }
    },function(ret, err){
      if (ret) {
        if(ret.Code=='OK'){
          toast('发送成功');
          times = 59;
          isinerval = setInterval("countDown()", 1000);
        }else{
          toast(ret.Message);
          $$('.getCode').addClass('ready');
        }
      }else{
        toast('发送失败，请稍候再试');
        $$('.getCode').addClass('ready');
      }
    });


}
//倒计时
function countDown() {
    if (times < 1) {
        $$('.getCode').addClass('ready').text('重新获取');
        clearInterval(isinerval);
        return;
    }
    $$('.getCode').text(times+'s');
    times--;
}
//手机号验证
function checkMobile(){
  phone = $$("#phone").val();
  var phoneRule = /^0?1[3|4|5|7|8][0-9]\d{8}$/;
  if(!phone){
    toast('请输入手机号');
    return false;
  }
  else if(!phoneRule.test(phone)){
    toast('不是有效的号码');
    return false;
  }
  return true;
}
//清空事件
function quxiao(el) {
    var inp = $$(el).prev().find('.input').val('');
    changeVal();
}
//保存
function submit() {
    if( $$('.comBtmBtn').hasClass('disabled') ){
      return;
    }
    var postData = {};
    postData.userid = getUserId();
    postData.name = name;
    postData.account = account;
    postData.mobile = phone;
    postData.code = code;
    api.ajax({
      url: BASE_URL + 'App/User/changeAliAccount',
      method: 'post',
      data: {
        values: postData
      }
    },function(ret, err){
      if (ret) {
        if(ret.code == 1){
          toast('修改成功');
          setTimeout(function(){
            api.closeWin();
          },1000)

        }else{
          toast(ret.msg);
        }
      }
    });
}
</script>
</html>
